<html>
    <head>
        <title>display/box/float/clear test         </title>
        <style type="text/css">
        /* last modified: 1 Dec 98 */

            html {
                font: 10px/1 Verdana, sans-serif;
                background-color: blue;
                color: white;
            }

            body {
                margin: 1.5em;
                border: .5em solid black;
                padding: 0;
                width: 48em;
                background-color: white;
            }

            dl {
                margin: 0;
                border: 0;
                padding: .5em;
            }

            dt {
                background-color: rgb(204, 0, 0);
                margin: 0;
                padding: 1em;
                width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
                height: 28em;
                border: .5em solid black;
                float: left;
            }

            dd {
                float: right;
                margin: 0 0 0 1em;
                border: 1em solid black;
                padding: 1em;
                width: 34em;
                height: 27em;
            }

            ul {
                margin: 0;
                border: 0;
                padding: 0;
            }

            li {
                display: block; /* i.e., suppress marker */
                color: black;
                height: 9em;
                width: 5em;
                margin: 0;
                border: .5em solid black;
                padding: 1em;
                float: left;
                background-color: #FC0;
            }

            #bar {
                background-color: black;
                color: white;
                width: 41.17%; /* = 14em */
                border: 0;
                margin: 0 1em;
            }

            #baz {
                margin: 1em 0;
                border: 0;
                padding: 1em;
                width: 10em;
                height: 10em;
                background-color: black;
                color: white;
            }

            form {
                margin: 0;
                display: inline;
            }

            p { margin: 0; }

            form p { line-height: 1.9; }

            blockquote {
                margin: 1em 1em 1em 2em;
                border-width: 1em 1.5em 2em .5em;
                border-style: solid;
                border-color: black;
                padding: 1em 0;
                width: 5em;
                height: 9em;
                float: left;
                background-color: #FC0;
                color: black;
            }

            address { font-style: normal; }

            h1 {
                background-color: black;
                color: white;
                float: left;
                margin: 1em 0;
                border: 0;
                padding: 1em;
                width: 10em;
                height: 10em;
                font-weight: normal;
                font-size: 1em;
            }
        </style>
    </head>
    <body>
        <dl>
            <dt>toggle             </dt>
            <dd>
                <ul>
                    <li>the way                     </li>
                    <li id="bar">
                        <p>
                            the world ends 			
                        </p>
                        <form action="./" method="get">
                            <p>
                                bang 				
                                <input type="radio" name="foo" value="off">
                            </p>
                            <p>
                                whimper 				
                                <input type="radio" name="foo2" value="on">
                            </p>
                        </form>
                    </li>
                    <li>i grow old                     </li>
                    <li id="baz">pluot?                     </li>
                </ul>
                <blockquote>
                    <address>
                        bar maids, 			
                    </address>
                </blockquote>
                <h1>sing to me, erbarme dich                 </h1>
            </dd>
        </dl>
        <p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
            This is a nonsensical document, but syntactically valid HTML 4.0. All 100%-conformant CSS1 agents should be able to render the document elements above this paragraph indistinguishably (to the pixel) from this             <a href="sec5526c.gif">reference rendering,</a>            (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <a href="sec5526c.htm">parent page</a>. 	
        </p>
    </body>
</html>